Typescript 타입 지정

 

typescript 설치

npm install -g typescript

 

 

tsconfig.json 생성 (아래와 같이 설정)

{
  "compilerOptions": {

    "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
    "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
    "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
    "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
    "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
    "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
    "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
    "outDir": "./", //js파일 아웃풋 경로바꾸기
    "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
    "removeComments": true, //컴파일시 주석제거 

    "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
    "noImplicitAny": true, //any타입 금지 여부
    "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
    "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
    "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
    "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
    "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

    "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
    "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
    "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
    "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
  }
}

 

 

type 종류

- string

- number

- boolean

- null

- undefined

- bigint

- [], {} 등

 

 

변수에 타입 지정

let a :number = 123; // let 변수 :타입 = 값;

 

 

배열에 타입 지정(타입 뒤에 대괄호)

let b :string[] = ['문자']; // let 변수 :타입[] = [값];

 

 

배열에 여러 타입 지정(유니온 타입)

type Member = [number, boolean];  // type을 변수로 저장
let heeju :Member = [123, true]; // 타입 지정한 순서대로 첫번째는 무조건 number, 두번째는 boolean

 

 

오브젝트 타입 지정

let a :{color: string} = {color :string}; // let 변수이름 :{key: number} = {key :number};
let heeju :{age?: number} = {age :123}; // // 키값 뒤의 물음표는 옵션. 있어도 되고 없어도 되는

 

 

오브젝트 지정할 타입이 많을 때(index signature)

type Member = {
  [key: string] :string, // 글자로 된 모든 obj속성의 타입은(전체 key) : string
}
let heeju: Member = {
  name: 'heeju',
  age: '25'
}

 

 

오브젝트 유니온 타입

let obj :{ a: (string | number) } = { a: 123 }; // (string | number) 둘 다 가능

 

 

함수 타입 지정

function funcName(x :number) :number { // function 함수이름(파라미터 :파라미터타입) :return타입 {}
  return x * 2;
}

function funcName2(x? :number) :number { // x? 는 :number | undefined 와 같은 의미
  return x * 2;
}

 

 

리턴이 없는 함수 타입 지정(void)

function funcName(x :number) :void {
  // void 타입에 return을 하려하면 에러
}

 

 

타입 2개 이상 합친 새로운 타입 만들기(union Type)

let a :string | number = '';
let b :(string[] | number) = 123; // 보기 좋게 소괄호 사용 가능 (숫자 또는 문자 배열)

 

 

타입 변수에 담아 쓰기(Type alias. 같은 이름의 type 변수 재정의 불가능)

type MyType = string | number; // 첫글자는 대문자로
let userName :MyType = 123;

 

 

type 변수 union type으로 합치기

type Name = string;
type Age = number;
type Person = Name | Age; // string | age

 

 

& 연산자로 obj타입 extend 하기

type PositionX = {x: number};
type PositionY = {y: number};
type NewType = PositionX & PositionY;

type Animal = {name :string};
type Cat = {age :number} & Animal;

 

 

class 타입 지정

class User {
  name :string; // 변수 :타입
  constructor(name :string) {
    this.name = name;
  }
}

 

 

모든 자료형 가능한 타입(any type)

let a :any = 123; // 값에 모든 자료형 가능

 

 

모든 자료형 가능한 타입(unknown type)

let a : unknown = abc; // 값에 모든 자료형 가능

 

 

any type과 unknown type 차이

 - any type은 타입 관련 버그가 생길 경우 버그 생긴 이유를 추적하기가 어려움

 - any type은 타입실드 해제 문법으로 사용(일반 자바스크립트처럼 사용하도록)

 - unknown type이 any type 보다 안전함

let anyType :any = "kim";
let num :number = anyType; // 에러안남(num의 타입실드도 무효화)

let unknownType :unknown = "kim";
let num :number = unknownType; // 에러남(num의 타입실드가 발동해서)