TypeScript ํ๊ฒฝ ๊ตฌ์ฑ, ํ์ , ํจ์, ์ฐ์ฐ์ ํ์ฉ ํ์ ์ ๋ํด ํ์ตํ๋ค.
JavaScript๊ฐ ๋ฐ์ ํ๋ฉด์ ์๊ธด ๋จ์ (ํ์ ์ ๋ช ์์ฑ์ด ๋ถ์กฑํ ๋จ์ ์ผ๋ก ์ธํด ์์์น ๋ชปํ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ํ๋ค.)์ ๋ณด์ํ๊ธฐ ์ํด ๋ฑ์ฅํ๋ค.
npm install typescript --save-dev
//tsconfig.json
//compilerOptions ๋ด์ ์์ฑ์ ์ปค์คํ
ํ ์ ์๋ค.
{
"compilerOptions": {
"target": "es6", // ๋ฒ์ ์ ๋ํ๋ธ๋ค.
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}
let isShow: boolean = true;
let isDone: boolean = false;
bigint
๋ฅผ ์ง์ํ๋ค.)let number1: number = 5;
let number2: number = 0.7;
let firstName: string = "jieun";
let lastName: string = 'choi';
let longString: string = `ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ๋ ์ค
์ด์ ์์ฑ์ด ๊ฐ๋ฅํฉ๋๋ค.`
//์ฒซ ๋ฒ์งธ ๋ฐฉ๋ฒ : ์์๋ค์ ๋ํ๋ด๋ ํ์
๋ค์ [] ์์ฑ
let items: string[] = ["apple", "banana", "grape"];
//๋ ๋ฒ์งธ ๋ฐฉ๋ฒ : Araay<์์ ํ์
> ์ ๋ค๋ฆญ ๋ฐฉ๋ฒ์ผ๋ก ์์ฑ
let numberList: Array<number> = [4, 7, 100];
let user: [string, number, boolean] = ["choijieun", 20, true];
//user[2]๋ boolean์ผ๋ก ํ์
์๋ฌ๊ฐ ๋๋ค.
console.log(user[2].toString());
any
๋ก ์ง์ ๋๊ธฐ ๋๋ฌธ์ ์ด๋ ํ ํ๋กํผํฐ๋ผ๋ ์ถ๊ฐํ ์ ์๋ค.let obj: object = {};
//๊ฐ์ฒด์ ํ๋กํผํฐ ํ์
๋ค์ ๊ฐ๊ธฐ ๋ช
์ํด ์ฃผ๋๊ฒ ์ข๋ค
// key-value์ ๊ตฌ์ฒด์ ์ธ ํ์
๊น์ง๋ ์ง์ ํ ์ ์๋ค.
let user: {name: string, age: number} = {
name: "choijieun",
age: 20
}
any
ํ์
์ ์ฌ์ฉํ ์ ์๋ค.let obj: object = {};
//์๋ฌ
obj = "hello";
let maybe: any = 4;
//์ ์
maybe = true;
undefined
์ด๋ค.) let maybe: any = 4;
//undefined๋ก ์ถ๋ ฅ
console.log(maybe.length);
let list: any[] = [1, true, "free"];
//any๋ก ๋ค๋ฃจ๊ณ ์๊ธฐ์ index ์ฒซ ๋ฒ์งธ ์์๊ฐ boolean ํ์
์ด์ง๋ง number ํ์
์ผ๋ก ์ฌํ ๋น ๊ฐ๋ฅ
list[1] = 100;
//named function
function add(x: number, y: number):number {
return x + y;
}
//arrow function
let add = (x: number, y: number): number => {
return x + y;
}
void
๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑ(ํ์
์ถ๋ก ๊ธฐ๋ฅ์ ํ์ฉํ์ง ์๋๋ค๊ณ ๊ฐ์ ํ์ ๋ ํ์)let printAnswer = (): void => {
console.log("Hi");
}
let greeting = (firstName: string, lastName: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//์๋ฌ
greeting('jieun');
//์ ์
greeting('jieun', 'choi');
//๋๋ฌด ๋ง์ ๋งค๊ฐ๋ณ์๋ฅผ ๋ณด๋ด ์๋ฌ
greeting('jieun', 'choi', 'Hi');
undefined
๋ฅผ ์ ๋ฌํ์ ๋ ํ ๋น๋ ๋งค๊ฐ๋ณ์์ ๊ฐ์ ์ ํด๋์ ์๋ ์๋ค.(default parameter
์ ๊ฐ์ ๋์)let greeting = (firstName: string, lastName="choi"): string => {
return `hello, ${firstName} ${lastName}`;
}
//์ ์
//๋ค์ ์ธ์๋ก undefined๋ฅผ ๋ณด๋ด๋ ๊ฐ์ โhello, jieun choiโ์ผ๋ก ๋ฐํ
greeting('jieun', undefined);
?
๋ฅผ ๋ถ์ฌ ํด๊ฒฐํ ์ ์๋ค.let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//์ ์
//์ ๋ฌ์ธ์๋ฅผ ํ๋๋ง ์ ๋ฌํ๊ธฐ ๋๋ฌธ์, ๋ค์ ๋งค๊ฐ๋ณ์๋ undefined๋ก ๋ฐํ
greeting('jieun');
|
์ฐ์ฐ์๋ฅผ ์ด์ฉ (JavaScript์์ ||
์ ๋์ผํ๋ค.)function printValue(value: number|string): void {
if (typeof value === "number") {
console.log(`number: ${value}`);
} else {
console.log(`string: ${value}`);
}
}
let value: string | number | boolean
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
//askSomenone ํจ์ ๋ด๋ถ์์๋ Developer, Person์ด ๊ฐ๊ณ ์๋ ๊ณตํต ํ๋กํผํฐ์ธ name์๋ง ์ ๊ทผ
// ๊ณตํต๋๊ณ ๋ณด์ฅ๋ ํ๋กํผํฐ๋ง ์ ๊ณตํด์ผ ํ๊ธฐ ๋๋ฌธ
// ๋ง์ฝ ๋๋จธ์ง ํ๋กํผํฐ์๋ ์ ๊ทผํ๊ณ ์ถ๋ค๋ฉด ํ์
๊ฐ๋๋ฅผ ์ฌ์ฉ
function askSomeone(someone: Developer | Person) {
console.log(someone.name);
}
ํ์ ๊ฐ๋(Type Guard)?
- TypeScript์์ ํ์ ์ ๋ณดํธํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๊ธฐ๋ฅ ์ค ํ๋
- ํ์ ๊ฐ๋๋ ํน์ ์ฝ๋ ๋ธ๋ก์์ ํ์ ์ ๋ฒ์๋ฅผ ์ ํํด ํด๋น ์ฝ๋ ๋ธ๋ก ์์์ ํ์ ์์ ์ฑ์ ๋ณด์ฅ
- in ์ฐ์ฐ์ : ํ์ ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฒด์ ์์ฑ์ด ์กด์ฌํ๋์ง๋ฅผ ์ฒดํฌํ๋ ์ฐ์ฐ์
function askSomeone(someone: Developer | Person) { // in ์ฐ์ฐ์๋ ๊ฐ์ฒด์ ์์ฑ ์ด๋ฆ๊ณผ ํจ๊ป ์ฌ์ฉํด ํด๋น ์์ฑ์ด ๊ฐ์ฒด ๋ด์ ์กด์ฌํ๋์ง ์ฌ๋ถ๋ฅผ ๊ฒ์ฌ if ('skill' in someone) { console.log(someone.skill); } if ('age' in someone) { console.log(someone.age); } }
in
์ฐ์ฐ์๋ ๊ฐ์ฒด์ ํ๋กํผํฐ ์ด๋ฆ๊ณผ ํจ๊ป ์ฌ์ฉ๋๋ค.
ํด๋น ํ๋กํผํฐ๊ฐ ๊ฐ์ฒด ๋ด์ ์กด์ฌํ๋์ง ์ฌ๋ถ๋ฅผ ๊ฒ์ฌํ๋ค.
&
์ฐ์ฐ์๋ฅผ ์ฌ์ฉ//value ๋ณ์๋ string, number, boolean ํ์
์ ์ ๋ถ ๋ฐ์ ์ ์๋ค.
let value: string & number & boolean;
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
//askSomeone ํจ์ ๋ด์์ ์ ์๋ ํ๋กํผํฐ์ ์ ๋ถ ์ ๊ทผํ ์ ์๋ค.
function askSomeone(someone: Developer & Person) {
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
Developer
์ Person
์ด๋ผ๋ ์๋ก์ด ํฉ์งํฉ์ ๋ง๋ค์ด ๋ด๋ ๊ฒ์ด๊ธฐ์, ์ ๋ฌ์ธ์๋ฅผ ์ ๋ฌํ ๋ ๋ชจ๋ ํ๋กํผํฐ๋ฅผ ์ ๋ถ ๋ณด๋ด์ค์ผํ๋ค. interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
//์ ๋์จ ํ์
function askSomeone(someone: Developer | Person) {
//ํ์
๊ฐ๋๋ฅผ ์ด์ฉํด ํ๋กํผํฐ์ ์ ๊ทผํ ์ ์๋ค.
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}
//์ ๋์จ ํ์
์ ์ ๋ฌ์ธ์๋ฅผ ์ ๋ฌํ ๋ ์ ํ์ง๊ฐ ์๊ธด๋ค.
askSomeone({name: '์ต์ง์', skill: 'ํ๋ก ํธ์๋'});
askSomeone({name: '์ต์ง์', age: 20});
//์ธํฐ์น์
ํ์
function askSomeone2(someone: Developer & Person) {
//ํ์
๊ฐ๋๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๋ชจ๋ ํ๋กํผํฐ์ ์ ๊ทผํ ์ ์๋ค.
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
//์ธํฐ์น์
ํ์
์ผ๋ก ๊ฒฐํฉํ๊ฒ ๋๋ค๋ฉด ์ ๋ฌ์ธ์๋ฅผ ์ ๋ฌํ ๋ ์ ํ์ง๊ฐ ์๋ค.
askSomeone2({name: '์ต์ง์', skill: 'ํ๋ก ํธ์๋', age:20});
ํ์
, ํจ์๋ ์ดํด๊ธฐ ์ฌ์ ๋๋ฐ
์ฐ์ฐ์ ํ์ฉ ํ์
์์ ์ดํด๊ฐ ์๋๋ ๋ถ๋ถ์ด ๋ง์๋ค.
์ด๋ ํ ๋ชฉ์ ? ์ธ์ง๋ ์๊ฒ ์ผ๋ ์ด๊ฒ์ ์ค์ตํด์ ํ์ด๋ณด๋ ค๊ณ ํ๋ ์๊ฐ ๋ณด๋ค ์ ๋์ง ์์๋ค.
ํ์
์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์
์ ๋ช
์์ฑ์ด ๋ถ์กฑํ ๋จ์ ์ ๋ณด์ํ ๊ฒ์ผ๋ก ์๋ง ํ๋ก์ ํธ ์์
์์ ์์ฃผ ์ฌ์ฉํ ๊ฒ ๊ฐ๋ค.
์๊ฐ ๋ ๋ ๋ง๋ค ํํํ ๊ณต๋ถํด์ผ๊ฒ ๋ค.