[Typescript] 빠르게 마스터하는 타입스크립트 part 1

Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함)

 

1. nodejs 설치

2. VScode 에디터

3. 터미널 오픈 npm intall -g typescript

4. 코드짤 폴더만들고 에디터로 폴더 오픈

5. 어쩌구.ts 파일 생성 후 코드 짜기

6. tsconfig.json 생성 후 내용 작성

//ts->js컴파일시 옵션 설정
{
 "compilerOptions":{
    "target":"es5",
    "module":"commonjs",
 }
}

7. 터미널 켜서 tsc -w입력해두면 자동 자바스크립트 파일로 변환

8. 이제 HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 .ts가 아니라 변환된 .js 파일을 사용

<script src="변환된파일.js"></script>

 

타입스크립트 정리

변수명 : 타입명 

let 이름 :string = 'kim'
let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age : number }
let 이름 :string | number = 'kim';

//type 키워드를 이용해 타입을 변수처럼 담아서 사용가능
type nameType = string | number;
let 이름 :nameType = 'kim';

//union type
let 이름: string | number = 'kim';
let 나이: (string | number) = 100;


//함수는 파라미터와 return 값이 어떤 타입일지 지정가능
function 함수명(x :number) :number{
  return x * 2
}

//array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 
//tuple 타입
type Member = [number, boolean];
let john:Member = [100, false]

//object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능
//type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방 
//특정 속성이 선택사항이면 물음표를 기입가능
type MyObject = {
  name? : string,
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

//object안에 어떤 속성이 들어갈지 아직 모른다면 그냥 전부 싸잡아서 타입지정도 가능
//index signature
type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

//class도 타입설정
//다만 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능
class Person {
  name;
  constructor(name :string){
    this.name = name;
  }
}

 

any타입

-> 타입실드 해제문법

 

unknown 타입

-> 모든 자료형 허용해줌 any랑 똑같은데, 좀 더 안전

 

간단한 수학 연산도 타입 맞아야함

 

함수에서 void 타입 활용 가능 (리턴하고 싶지 않을 때)

=> return 하는 걸 사전에 막을 수 있다

 

파라미터가 옵션일 경우엔 파라미터변수?:타입

 

?연산자는 들어올수도 있다 ~ 라는 뜻. 변수?:number는 변수:number | undefined와 같음

 

 

타입 확정하기 Narrowing & Assertion

Type이 아직 하나로 확정되지 않았을 경우 Type Narrowing(=타입 확정)

function 내함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

 

 

if문 썼으면 끝까지 써야 안전, else, else if 안쓰면 에러로 잡아줄 수도

 

Narrowing으로 판정해주는 문법들

typeof 변수

속성명 in 오브젝트자료

인스턴스 instanceof 부모

 

 

assertion 문법(=타입 덮어쓰기) as 키워드 사용 : 무슨 타입이 들어올지 100% 확실할 때 사용 (주로 비상용..)

function 내함수(x :number | string){ 
    return (x as number) + 1 
}
console.log( 내함수(123) )

 

타입도 변수에 담아쓰세요 type 키워드 써서 & readonly 로 잠그기

type Animal = string | number | undefined;
let 동물 :Animal;

type Girlfriend = {
  readonly name : string,
}

let 여친 :Girlfriend = {
  name : '엠버'
}

여친.name = '유라' //readonly라서 에러남

 

타입스크립트 에러는 에디터, 터미널에서만 존재. 실제 변환된 js파일은 에러 없음

 

&연산자로 object 타입 합치기(extend)

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let 좌표 :XandY = { x : 1, y : 2 }

 

같은 이름의 type 변수 재정의 불가능

 

Literal Types로 만드는 const 변수 유사품

let john :'대머리';
let kim :'솔로';

변수에 뭐가 들어올지 더 엄격하게 관리가능

자동완성 힌트 굿

object 자료를 완전히 잠가놓고 싶으면 as const 쓰기

 

 

함수와 methods에 type alias 지정하는 법

//함수 타입은 ()=>{} 모양으로
type NumOut = (x : number, y : number ) => number ;

//함수표현식에만 type alias(별칭) 사용가능
let 함수:NumOut = function (){}

 

methods 안에 타입지정하기 

type Member = {
  name : string,
  age : number,
  plusOne : ( x :number ) => number,
  changeName : () => void
}

함수1(함수2)

let 회원정보 = {
  name : 'kim',
  age : 30,
  plusOne (x){
    return x + 1
  },
  changeName : () => {
    console.log('안녕')
  }
}
회원정보.plusOne(1);
회원정보.changeName();

 

콜백함수의 개념

function 함수1(a){
  a()
}
function 함수2(){
  어쩌구~~
}

함수1(함수2)

 

 

타입스크립트로 HTML 변경과 조작할 때 주의점

1.narrowing

let 제목 = document.querySelector('#title');
if (제목 != null) {
  제목.innerHTML = '반갑소'
}

 

2. 더 좋은 instanceof 사용

let 제목 = document.querySelector('#title');
if (제목 instanceof HTMLElement) {
  제목.innerHTML = '반갑소'
}

 

3. assertion  

let 제목 = document.querySelector('#title') as HTMLElement;
제목.innerHTML = '반갑소'

 

4. optional chaining 연산자 

let 제목 = document.querySelector('#title');
if (제목?.innerHTML != undefined) {
  제목.innerHTML = '반갑소'
}

 

5. 그냥 strict 설정 false로 끄기

"strictNullChecks":false

 

html element 타입이 여러가지 있다

let 링크 = document.querySelector('#link');
if (링크 instanceof HTMLAnchorElement) {
  링크.href = 'https://kakao.com'  //잘됨
}

 

 

class 만들 때 타입지정 가능

class Person {
  data :number = 0;
}

let john = new Person();
john.data = '1';  //이제 문자할당시 에러남

constructor 타입지정

class Person {
  name:string;
  age:number;
  constructor ( a :string ){
    this.name = a;
    this.age = 20;
  }
}

 

 

Object에 타입지정하려면 interface 이것도 있음 

interface Square { 
  color :string, 
  width :number, 
} 

let 네모 :Square = { color : 'red', width : 100 }

   

- 장점) extends로 복사 가능

interface Student {
  name :string,
}
interface Teacher extends Student {
  age :number
}

 

 - & 기호(intersection type) 두 타입을 전부 만족하는 타입이라는 뜻

type Animal = { 
  name :string 
} 
type Cat = Animal & { legs: number }

 

type vs interface 가장 큰 차이점

interface는 중복선언 가능(합쳐짐), 재정의 가능 (라이브러리는 대부분 인터페이스 씀)

type은 중복선언 불가능

 

&쓸때 중복속성 발생하면? 미리 에러 안나서 주의

 

 

 

 

 

 

 

 

 

/강의 출처: 코딩애플/