10.26

jihyun·2022년 10월 27일

타입스크립트

목록 보기
1/2

타입스크립트: 자바스크립트를 기반으로하는 슈퍼셋 언어

브라우저, node.js 에서는 타입스크립트를 실행할 수 없다. = js실행하는 환경에서는 ts실행할 수 없음

타입스크립트는 js로 컴파일 하기 전까지의 개발 단계에서 유용 하다.
타입스크립트는 런타임 코드를 변경하지 않음, 즉 잘못된 파일을 컴파일 해도 그것을 막지는 않는다.

자바스크립트는 동적 타입 = 현재의 타입을 확인할 수 있는 typeof 연산자
타입스크립트는 정적 타입 = 개발 도중 변수의 타입 정의

타입추론

//이 경우 temp는 any
let temp;
temp = 5;

//나중에 어떤 값이 담길 지 타입으로 알려주는 것이 좋다.
let temp2: number;
temp2 = "11";
//따로 타입을 지정하지 않아도 타입을 추론한다.

let phrase = "The Result is ";
phrase = 1234;

// 만약 추론한 타입과 다른 값을 할당하면 ? Error

튜플? 길이가 고정된 array

role: [string, 'dev'],

enum

//app.ts

enum Role {
	ADMIN,
	USER,
	DEV,
}

const person = {
	name: "jihyun",
	age: 30,
	hobbies: ["sports", "cooking"],
	role: Role.DEV,
};

//app.js
var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["DEV"] = 2] = "DEV";
})(Role || (Role = {}));

var person = {
    name: "jihyun",
    age: 30,
    hobbies: ["sports", "cooking"],
    role: Role.DEV
};

enum의 시작을 특정숫자로 지정한 경우, 해당 숫자에서 증가
각각 숫자, 문자 할당하는 것도 가능

union

function combine(input1: number | string, input2: number | string) {
	let result;
	//유니언 타입을 사용하는 경우 런타임에서 타입 체크 필요한 경우가 있음
	if (typeof input1 === "number" && typeof input2 === "number") {
		result = input1 + input2;
	} else {
		result = input1.toString() + input2.toString();
	}
	return result;
}

void : 아무것도 반환하지 않는 함수 타입임을 명시

function add(n1: number, n2: number) {
	return n1 + n2;
}

function printResult(num: number) {
	console.log("result " + num);
}

function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
	const result = n1 + n2;
	cb(result);
}

printResult(add(5, 12));

// let combineValues: Function;
//함수가 어떻게 동작하는지, 반환값 명시
let combineValues: (a: number, b: number) => number;

combineValues = add;

//Error
// combineValues = printResult;
// combineValues = 5;

console.log(combineValues(8, 8));

addAndHandle(1, 2, (result) => {
	console.log(result);
	// 콜백 함수는 자신이 전달되는 인수가 반환 값을 기대하지 않는 경우에도 값을 반환할 수 있다.
	return result;
});

unknown

//unkown != any, unknown이 any보다 제한적
let userInput: unknown;
let userName: string;

//Not Error
userInput = 5;
userInput = "kim";

//Error
userName = userInput;

//Not Error
if (typeof userInput === "string") {
	userName = userInput;
}

0개의 댓글