[TS]타입스크립트

devbit4 [front-end developer]·2021년 10월 24일
0

타입스크립트

목록 보기
1/1

1. 필수문법과 설치 셋팅

타입스크립트 = JavaScript + Type문법

타입스크립트의 장점

  1. 코드 길게 짤 땐 자유도와 유연성은 적
    (JavaScript는 Dynamic Typing 가능)
  2. 에러메시지가 좋음

타입스크립트 설치

  1. node js 설치
  2. npm install -g typescript

-index.ts
-tsconfig.json

{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
	}
}
  1. tsc -w(타입스크립트를 자바스크립트로 변환)
    -index.js 자동생성

let 이름:string = 'kim';
let 이름: string[]= ['kim','park'];
let 이름: {name?: string} = {name: 'kim'}; //name 속성이 옵션일때
let 이름: string|number = 123;

type 내타입 = string | number;
let 이름: 내타입 = 123;

function 함수(x: number):number{
return x*2
}
파라미터와 return 모두

type Member = [number, boolear];
let john:Member = ['123', true];

type Member = {
[key: string] : string}
let john :Member = {name: 'kim', age: '123'}

2. 타입스크립트 기본 타입 정리

타입지정 원래 자동으로 되기에 타입지정 문법 생략가능

3. 타입을 미리 정하기 애매할 때

number|string

let 이름: any;(타입실드 해제할 때/ 의미가 없음)

let 이름: unknown; (any보다 안전)

4. 함수

void: 리턴하는 걸 사전에 막기
파라미터가 옵션일 경우: 파라미터변수?:타입
(변수 : number|undefined)

타입 narrowing : if문 쓰기
typeof변수

assertion문법(타입 덮어쓰기) : x as number;
-> 1) narrowing 할 때 쓴다.
2) 타입을 변경할 때 쓰는 문법이 아니다
3) 무슨 타입이 들어올지 100% 확실할 때 쓰기

if 문 쓰고 비상용으로 assertion

5.콘솔창

index.html 창 생성 후 script src 후 오픈

6. type 변수

//type 변수 만드는 법
type Animal = string | number | undefined;
let 동물: Animal = 123;

type Human = { name: string; age: number };
let 사람: Human = { name: "kim", age: 20 };

const 변수는 재할당만 막는 역할임.
const로 담은 object 수정은 자유롭게 가능

type Girfriend = {
    readonly name:string
}

const 여친:Girfriend={
    name:'엠버'
}

여친.name='유라'

readonly 쓰면 object 자료 수정 막을 수 있음

but 타입스크립트 에러는 에디터/터미널에서만 존재함

profile
제대로 꾸준하게 / 블로그 이전 => https://dailybit.co.kr

0개의 댓글