Typescript 설치 및 기본 문법

설치

• NodeJS 설치
• 터미널 : npm install -g typescript

---

• target
  * 타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전

• module
  자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳
  commonjs는 require 문법 / es2015, esnext는 import 문법
  

---

ts 파일은 브라우저가 읽지 못하므로 js파일로 변환 필요

터미널에 tsc -w 입력

이제 ts에 작성하고 저장하면 js로 컴파일 된다. 컴파일 옵션을 tsconfig.json에 설정

index.ts

let name: string = "kim";

let names: string[] = ["park", "kim"];

let nameObj: { name: string } = { name: "kim" };
// let nameObj: { name?: string } = { name: "kim" };
// 속성 뒤에 ? : 해당 속성은 옵션
let option: { name?: string } = {};

// 여러가지 타입이 올 수 있을 때
let strOrNum: string | number = 123;
strOrNum = "123";

// 타입을 변수로 저장 가능
// 일반 변수와 구분하기 위해 첫글자 대문자
type MyType = string[] | number;
let x: MyType = ["a", "bcx"];
x = 3;

// 파라미터는 string, 리턴값은 number
function func(x: string): number {
  return x.length;
}
func("abcd");

// tuple type
type Member = [number, boolean];
let john: Member = [123, true];

// string으로 된 모든 object의 속성 타입은 string
type User = {
  [key: string]: string;
};
let jack: User = { name: "kim", age: "123" };


class Me {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

index.js

let name = "kim";
let names = ["park", "kim"];
let nameObj = { name: "kim" };
// let nameObj: { name?: string } = { name: "kim" };
// 속성 뒤에 ? : 해당 속성은 옵션
let option = {};
// 여러가지 타입이 올 수 있을 때
let strOrNum = 123;
strOrNum = "123";
let x = ["a", "bcx"];
x = 3;
// 파라미터는 string, 리턴값은 number
function func(x) {
    return x.length;
}
func("abcd");
let john = [123, true];
let jack = { name: "kim", age: "123" };
class Me {
    constructor(name) {
        this.name = name;
    }
}

---

Type check