타입 추론 & 명시 & 인터페이스
9185 단어 typescripttypescript
1. 타입 추론
let a = 5;
a = 'hello'; // Type 'string' is not assignable to type 'number'.
- 타입 표기가 없는 경우 타입스크립트에서 코드를 읽고 분석하여 타입을 유추한다.
- 위 코드처럼 타입을 명시하지 않고
a
변수에 number 타입의 값을 할당한 후 밑에 줄에서 string 타입의 값을 할당하면 에러 메세지가 나타난다.
let student = {
name: 'jake',
cousre: 'script',
codingIQ: 123,
code: (score:number)=>{
alert(score);
}
}
student.name = 10;
function calculator(number){
return 100 - number;
}
student
객체에 타입을 명시하지 않고 student.name 속성의 값을 number 타입의 값으로 할당하면 타입스크립트에서 에러메세지를 보낸다.
- 함수 또한 마찬가지로 매개변수의 타입을 선언하지 않고 뺄셈 연산자를 통해
function calculator(number: any): number
반환되는 값이 number
타입인 것을 알고 있다.
2. 타입 명시
function getStudentDetails(studentID:number):{
studentID: number;
studentName: string;
age:number;
gender:string;
subject:string;
courseCompleted:Boolean;
}{
return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}
- 함수에서 매개변수와 반환되는 값의 타입을 명시할 수 있다.
- 매개변수는 괄호 안에서 변수 옆에 타입을 명시하고 반환 값에 대한 타입 명시는 매개변 수 옆에 명시를 하고 반환되는 값이 없을 경우
void
를 작성해주면 된다.
3. 인터페이스
interface Student {
readonly studentID: number;
studentName: string;
age? :number;
gender:string;
subject:string;
courseCompleted:Boolean;
addComment?: (comment:string) => string;
}
function getStudentDetails(studentID:number):Student{
return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}
function saveStudentDetails(student: Student):void{
// Cannot assign to 'studentID' because it is a read-only property.
student.studentID = 10;
}
- 인터페이스는 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
- 인터페이스에 선언된 속성 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 한다.
- 속성의 뒤에
?
를 붙여 있어도 되고 없어도 되는 선택적 속성
으로 만들어 줄 수 있다.
- 마지막
saveStudentDetails
함수처럼 매개변수의 타입을 인터페이스를 재사용
하여 타입을 정의할 수 있다.
readonly
속성은 새로운 값이 할당될 수 없다.
Interface
는 자바스크립트로 컴파일될 때 코드에서 지워진다.
Author And Source
이 문제에 관하여(타입 추론 & 명시 & 인터페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@vsnm25/타입-추론-명시-인터페이스
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
let a = 5;
a = 'hello'; // Type 'string' is not assignable to type 'number'.
- 타입 표기가 없는 경우 타입스크립트에서 코드를 읽고 분석하여 타입을 유추한다.
- 위 코드처럼 타입을 명시하지 않고
a
변수에 number 타입의 값을 할당한 후 밑에 줄에서 string 타입의 값을 할당하면 에러 메세지가 나타난다.
let student = {
name: 'jake',
cousre: 'script',
codingIQ: 123,
code: (score:number)=>{
alert(score);
}
}
student.name = 10;
function calculator(number){
return 100 - number;
}
student
객체에 타입을 명시하지 않고 student.name 속성의 값을 number 타입의 값으로 할당하면 타입스크립트에서 에러메세지를 보낸다.- 함수 또한 마찬가지로 매개변수의 타입을 선언하지 않고 뺄셈 연산자를 통해
function calculator(number: any): number
반환되는 값이number
타입인 것을 알고 있다.
function getStudentDetails(studentID:number):{
studentID: number;
studentName: string;
age:number;
gender:string;
subject:string;
courseCompleted:Boolean;
}{
return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}
- 함수에서 매개변수와 반환되는 값의 타입을 명시할 수 있다.
- 매개변수는 괄호 안에서 변수 옆에 타입을 명시하고 반환 값에 대한 타입 명시는 매개변 수 옆에 명시를 하고 반환되는 값이 없을 경우
void
를 작성해주면 된다.
3. 인터페이스
interface Student {
readonly studentID: number;
studentName: string;
age? :number;
gender:string;
subject:string;
courseCompleted:Boolean;
addComment?: (comment:string) => string;
}
function getStudentDetails(studentID:number):Student{
return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}
function saveStudentDetails(student: Student):void{
// Cannot assign to 'studentID' because it is a read-only property.
student.studentID = 10;
}
- 인터페이스는 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
- 인터페이스에 선언된 속성 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 한다.
- 속성의 뒤에
?
를 붙여 있어도 되고 없어도 되는 선택적 속성
으로 만들어 줄 수 있다.
- 마지막
saveStudentDetails
함수처럼 매개변수의 타입을 인터페이스를 재사용
하여 타입을 정의할 수 있다.
readonly
속성은 새로운 값이 할당될 수 없다.
Interface
는 자바스크립트로 컴파일될 때 코드에서 지워진다.
Author And Source
이 문제에 관하여(타입 추론 & 명시 & 인터페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@vsnm25/타입-추론-명시-인터페이스
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
interface Student {
readonly studentID: number;
studentName: string;
age? :number;
gender:string;
subject:string;
courseCompleted:Boolean;
addComment?: (comment:string) => string;
}
function getStudentDetails(studentID:number):Student{
return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}
function saveStudentDetails(student: Student):void{
// Cannot assign to 'studentID' because it is a read-only property.
student.studentID = 10;
}
- 인터페이스는 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
- 인터페이스에 선언된 속성 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 한다.
- 속성의 뒤에
?
를 붙여 있어도 되고 없어도 되는선택적 속성
으로 만들어 줄 수 있다. - 마지막
saveStudentDetails
함수처럼 매개변수의 타입을 인터페이스를재사용
하여 타입을 정의할 수 있다. readonly
속성은 새로운 값이 할당될 수 없다.Interface
는 자바스크립트로 컴파일될 때 코드에서 지워진다.
Author And Source
이 문제에 관하여(타입 추론 & 명시 & 인터페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@vsnm25/타입-추론-명시-인터페이스저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)