안녕하세요 여러분, 저는 최근 TypeScript 여행을 시작했고 프로그래밍 히어로의 고급 웹 개발 과정을 통해 진전을 이루고 있습니다. TypeScript에 대한 기본 지식은 있지만 깊이 있게 살펴보지는 않았습니다. 내 과정은 TypeScript에 대한 심층 분석으로 시작되었습니다. 일주일이 지났고, 나는 학습에 상당한 진전을 이루었습니다. 다음은 제가 파악한 주요 개념에 대한 간략한 개요입니다.
TypeScript는 언어에 선택적 정적 타이핑을 추가하는 JavaScript의 상위 집합입니다. 즉, 변수 유형, 함수 매개변수 및 반환 값을 선언할 수 있어 개발 프로세스 초기에 잠재적인 오류를 포착하는 데 도움이 될 수 있습니다.
TypeScript 사용의 이점
기본 데이터 유형은 단일 값을 나타내며 메모리에 직접 저장됩니다. 다음은 TypeScript에 사용되는 기본 데이터 유형 중 일부입니다
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
예제에서 볼 수 있듯이 변수에 유형을 할당하려면 변수 이름과 유형을 정의한 후 콜론( : ) 기호를 사용해야 합니다.
참조 유형이라고도 알려진 비기본 데이터 유형은 복잡한 데이터 구조를 나타내며 메모리 위치에 대한 참조로 저장됩니다. TypeScript는 다음과 같은 비원시 데이터 유형을 지원합니다.
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
TypeScript의 유형 별칭은 기존 유형에 새 이름을 부여하는 방법입니다. 이렇게 하면 특히 복잡한 유형을 처리할 때 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다.
// Defining a type alias for a person object
type Person = {
name: string;
age: number;
};
// Using the type alias
const person1: Person = {
name: "Alice",
age: 30
};
이 예에서 Person은 name 및 age 속성이 있는 객체를 나타내는 유형 별칭입니다.
TypeScript의 결합 및 교차 유형
공용체 유형은 여러 유형 중 하나일 수 있는 값을 나타냅니다. |를 사용하여 정의됩니다. 연산자입니다.
교차 유형은 여러 유형을 단일 유형으로 결합합니다. & 연산자를 사용하여 정의됩니다.
type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
name: string;
age: number;
};
type Address = {
street: string;
city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
never 유형은 절대 발생하지 않는 값을 나타냅니다.
알 수 없는 유형은 모든 값을 나타냅니다. 알 수 없는 유형의 값을 사용하기 전에 유형 확인이나 어설션을 수행해야 하기 때문에 any 유형보다 안전합니다.
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
유형 어설션은 유형에 대해 자신이 알고 있는 것보다 더 많이 알고 있음을 TypeScript 컴파일러에 알리는 방법입니다. 변수의 타입을 명시적으로 지정하는 방법입니다
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
유형 가드를 사용하면 특정 조건에 따라 변수 유형의 범위를 좁힐 수 있습니다. 속성이나 메서드에 액세스하기 전에 변수 유형을 확인하면 잠재적인 런타임 오류를 방지할 수 있습니다.
// Defining a type alias for a person object
type Person = {
name: string;
age: number;
};
// Using the type alias
const person1: Person = {
name: "Alice",
age: 30
};
TypeScript의 인터페이스는 특정 속성을 가진 객체를 생성하기 위한 청사진입니다.
type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
name: string;
age: number;
};
type Address = {
street: string;
city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
이 예에서 Person 인터페이스는 person 객체에 firstName, lastName 및 age 속성이 있어야 함을 정의합니다. person1 객체 생성 시
제네릭은 다양한 데이터 유형과 작동할 수 있는 재사용 가능한 구성 요소를 만들 수 있는 TypeScript의 강력한 기능입니다.
function error(message: string): never {
throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
let strLength: number = value.length;
}
이 예에서 T는 유형 매개변수입니다. 이는 모든 유형에 대한 자리 표시자를 나타냅니다. 항등 함수를 호출하면 모든 유형의 인수를 전달할 수 있으며 함수는 동일한 유형을 반환합니다.
TypeScript에서 일반 제약 조건을 사용하면 일반 함수에 인수로 전달되거나 일반 클래스 또는 인터페이스에서 유형 매개변수로 사용될 수 있는 유형에 제한을 적용할 수 있습니다.
let value: unknown = "hello"; let strLength: number = (value as string).length;
여기서 확장 키워드는 데이터를 제한하는 데 사용됩니다
TypeScript의 keyof 연산자는 객체 유형의 모든 속성 이름에 대한 통합 유형을 가져오는 데 사용됩니다. 이는 일반 유형 및 매핑된 유형으로 작업할 때 특히 유용합니다.
//typeof
function printValue(value: unknown) {
if (typeof value === "string") {
console.log(value.toUpperCase());
} else if (typeof value === "number") {
console.log(value.toFixed(2));
}
}
//instanceof
function printDate(date: unknown) {
if (date instanceof Date) {
console.log(date.toISOString());
}
}
Pick
interface Person {
firstName: string;
lastName: string;
age: number;
}
const person1: Person = {
firstName: "Alice",
lastName: "Johnson",
age: 30
};
Omit
function identity<T>(arg: T): T {
return arg;
}
identity<string>(string);
부분
interface Person {
name: string;
age: number;
}
function identity<T extends Person>(arg: T): T {
return arg;
}
const result = identity<Person>({
name: "aa";
age: 12;
});
다른 사람들은
필수
읽기 전용
녹음
TypeScript에서 클래스는 class 키워드를 사용하여 정의됩니다.
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"
공개 클래스 구성원의 기본 공개 상태는 공개입니다. 공개 회원은 어디에서나 접근 가능
보호된 멤버는 자신이 선언된 클래스의 하위 클래스에만 표시됩니다.
private 멤버는 클래스 내에서만 접근 가능합니다.
TypeScript의 정적 멤버는 클래스의 개별 인스턴스가 아닌 클래스 자체에 속하는 멤버(속성 및 메서드)입니다.
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
TypeScript에서 인터페이스는 클래스가 구현할 계약을 정의합니다. 인터페이스를 구현하는 클래스에는 인터페이스에 선언된 모든 속성과 메서드가 있어야 합니다. Implements 키워드가 사용됩니다
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
이번 주에 배운 Typescript의 기본 사용 사례 중 일부입니다. 나는 많은 멋진 것들을 배웠지만 아직 발견할 것이 훨씬 더 많습니다. TypeScript는 끊임없이 발전하고 있으므로 최신 릴리스와 기능을 따라잡기 위해 노력하고 있으며 TypeScript의 공식 문서와 블로그에서 최신 뉴스와 모범 사례를 확인하고 있습니다.
내 여행에 함께 해주셔서 감사합니다.
위 내용은 Typescript를 배우기 위한 여행.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
