타입스크립트(애플코딩)

자바스크립트는 자유도가 높기때문에 5 - '2' = 3 이라는 숫자열 - 문자열을 했는데 숫자로 자동변환되어 계산이 되버리기 때문에

자유도 & 유연성은 작은 프로젝트에는 더 편리할지 몰라도 큰 프로젝트에는 에러를 일으키기 너무 쉽다.

그렇기 때문에 큰 프로젝트일수록 타입스크립트를 사용하는게 좋다.

또한 타입을 엄격하게 잡아주기 때문에 에러메세지가 자세하게 얘기해준다. 이건 엄격한 타입체크를 해주기 때문에 그렇다고 할 수 있다. 

 

// 간단 타입지정
let 이름 :string = 'kim'

// array 타입지정
let 이름 :string[] = ['kim','park']

// object타입지정
let 이름 :{name?:string} = {name:'kim'}

?는 속성이 들어올 수 도 있고 안들어올 수도 있다라는걸 표현함 

name이 안들어와도 에러가 나지 않음.

 

 

 

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문 이상하면 에러내기 
 }
}

 

 

기본 타입 정리 

// 기본 변수 타입
string, number, boolean, null, undefined

// 배열 타입
string[], number[], ...

// object 자료형
let 회원 : {member1 : string, member2 : string} = {member1 : 'kim', member2 : 'park'}

 

타입스크립트는 전체 다 타입을 지정을 해주지 않아도 기본적으로 타입을 추론해준다.

 

Union Type

// Union type 또는 이라는 의미이다.
let 이름 : string[] | number = 123;

'|' 써서 문자열로 이루어진 배열 또는 숫자타입이다 라는걸 의미한다.

 

타입을 지정했을때 너무 길어지면 타입을 변수에 담아서 쓸 수 있다.

type Name = string|number;

let 이름 :Name = 123

타입을 지정한 변수를 만들때는 일반 변수화 차별화를 위해 첫문자를 대문자로 사용한다. 

숫자 or 문자가 가능한 array / object 타입 지정은?

let 회원들 : (number | string)[] = [1,'2',3];
let 오브젝트 : {a : string | number} = {a : '123'}​

 

array에 쓸 수 있는 tuple타입

type Member = [number, boolean];

let john:Member = [123, true]

이건 배열에 첫번째는 무조건 숫자열 두번째는 불리언으로 값이 들어와야 하며 다른 타입이 들어오면 에러가 발생한다.

 

 

type Member = {
	name : string
}

let john :Member = {name : 'kim'}

이런것처럼 한개의 객체면 타입을 하나 추가해도 쉽지만 100개가 넘어버리면 하나씩 지정하기 어렵다.

type Member = {
	[key :string]:string
}

let john :Member = {name : 'kim'}

이런식으로 전체 다 잡아서 한번에 타입을 지정해줄 수 있다.

 

 

any

any타입을 사용하게되면 타입실드 해제문법으로 어떤 타입이든 가능하다 라는 의미로 그냥 자바스크립트랑 다를게 없다.

any를 사용하게되면 추후 타입관련 버그가 나더라도 에러를 잡아주지 않는다.

 

unknown

any와 용도가 비슷한 타입이다. 

다만 any와는 다르게 안정성이 있다 

let 이름 : unlnown;
이름 = 123;
이름 = {};

let 변수1 : string = 이름;
// 에러 발생 : 이름은 객체타입으로 string타입에 넣을 수 없음

---------------------------------------------------------

let 이름 : any;
이름 = 123;
이름 = {};

let 변수1 : string = 이름;
// 에러없이 잘 대입된다.

let 이름 : unknown;

이름 - 1; 
// 에러발생 : 간단한 수학연산도 타입이 맞아야함 unknown은 number타입이 아니다.

---------------------------------------------------------------

let 이름 : any;

이름 - 1; 
// 에러가 발생하지 않는다.

수학연산 예제 

let 나이: string|number;
나이 + 1;

// 타입스크립트는 엄격하기 떄문에 string, number둘다 연산이 가능해서 어떤게 들어올지 몰라 에러가 발생한다.

let 나이: unknown = 1;
나이 + 1

// 나이변수에 타입이 unknown이고 1이라는 숫자열을 지정했지만 결국 타입은 unknown이기 때문에 에러가 발생한다.

 

함수타입

function 함수 (x : number):number{
	return x * 2
}

위타입은 x에는 무조건 숫자열이 들어와야하고 리턴값도 무조건 숫자열이 나와야 한다.

 

리턴을 하지 않는거에 대해서나 리턴을 사용하면 에러가 나게하려면 void를 사용하게된다. 

function 함수(x :number) : void {
  return 1 + 1
}

// 에러발생 : number타입에 void타입을 사용할 수 없다 .