[Typescript] 기본 필수 문법

기본 타입 지정

let person_name_str :string = "KimJiWoo"; 
// 문자열

let person_name_array :string[] = ["KimJiWoo"]; 
// 문자열로 이루어진 array

let person_name_union_array :(string | number)[]= ["Kim", 12, "HI"]; 
// 문자열과 숫자로 이루어진 array

let person_name_obj :{name : string} = {name : "KimJiWoo"}; 
// 문자열로 이루어진 object

let person_name_obj_str :{name : string | number} = {name : "Kim"}; 
// 문자열과 숫자로 이루어진 object
let person_name_obj_num :{name : string | number} = {name : 123}; 
// 문자열과 숫자로 이루어진 object

let person_name_obj_2 :{name? : string, age : number} = {age : 27} 
// name 속성이 안들어올수도 있다는 object

let person_name_str_num :string | number = "KimJiWoo"; 
// 문자열과 숫자

let person_name_any :any = "Kim"+23 
// 모든 타입 가능

 

타입을 변수에 담을수도 있음

type str_or_num = string | number;

let person_name :str_or_num = "KimJiWoo"

 

타입을 함수의 매개변수에도 담을수도 있음

** 타입스크립트에서 함수 생성시 매개변수를 만들면 함수 호출 시 무조건 매개변수를 입력해야함

function typeFunc(value : number){ //매개변수에 지정
    return value * 5
}

//** 타입스크립트에서 아무 설정없이 함수 생성시 매개변수를 만들면 함수 호출 시 무조건 매개변수를 입력해야함
//** 만약 매개변수 입력안해도 되게 하려면 아래처럼

function typeFunc(value? : number){ //매개변수에 지정
    return value * 5
}

//이렇게 하면 매개변수를 안넣고 함수를 호출해도 됨

 

함수의 return 값의 타입을 명시해 줄수도 있음

function typeFunc(value : number) :number { //매개변수 -> num // return value -> num
    return value * 5
}

function typeFunc(value : number) :void { //매개변수 -> num // return 안함(불가)
    value * 5
}

 

array에서 쓸 수 있는 tuple 타입

type member = [string, boolean]; // array타입 // 첫 번째는 string, 두 번째는 boolean 타입으로 지정

let jiwoo_info: member = ["jiwoo", true]

 

object 타입에 지정해야할 속성이 많을 때

type object_example = {
    [key :string] : string // key값이 string 일 때 value값도 string
}

let obj_example :object_example = {"name" : "JiWoo"}

let obj_example :object_example = {"name" : "JiWoo", "age" : 27} // type error

---

참고사항 1

이 코드는 왜 에러가 나는 이유

let age: string|number;
age + 1;

분명 자바스크립트에선 문자에도 +1 가능하고 숫자에도 +1 가능하다.

근데 저건 에러가 난다.

 

이 코드도 왜 에러

let age: unknown = 1;
age + 1;

분명히 나이라는 변수는 1인데 +1 안해준다.

타입스크립트는 언제나 확실한걸 좋아한다.

지금 변경하려는 변수의 타입이 확실해야 연산을 수행해준다.

그래서 -1은 확실하게 왼쪽에 있는게 number 타입일 때만 가능하다.

unknown은 number타입이 아니다.

string|number 이것도 number 타입이 아니다.

(union type은 새로운 타입을 하나 만든 것이다)

+1도 마찬가지이다.

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

참고로 이 것도 에러임 

참고사항 2에서 다루지만 x? :number는 x :number | undefined기 때문에 x는 number타입을 가지는게 아니라 number | undefined 타입을 가지는 것임.

 

-> 정리 : number -> 정수 타입(연산 가능), string -> 문자열 타입(연산 가능), number | string(연산 불가능) -> 정수나 문자열 타입

 

참고사항 2

function typeFunc(value? : number){
    return value * 5
}

function typeFunc(value : number | undefined){
    return value * 5
}

value? : number 와 value : number | undefined는 동일함.

둘 다 value가 넘버일수도 있고 value가 안들어올수도 있다는 뜻임

 

번외 : tsconfig 쓸만한 내용들

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