Typescript 인덱싱 에러

const [isChecked, setIsChecked] = useState({
		isExpiration: false,
		isPassword: false,
	});
    
const handleCheckbox = (name: string) => {
		setIsChecked(prev => ({
			...prev,
			[name]: !prev[name],
		}));
};
    
    
 <div className="form__input__checkbox" onClick={() => handleCheckbox('isPassword')}>
       {isChecked.isPassword && <FaCheck />}
</div>

 

이런 코드가 있는데 

!prev[name] 부분에서 

 

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ isExpiration: boolean; isPassword: boolean; }'.

No index signature with a parameter of type 'string' was found on type '{ isExpiration: boolean; isPassword: boolean; }'.ts(7053)

 

이런 에러가 발생했다.

 

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ isExpiration: boolean; isPassword: boolean; }'. 

이 에러는 TypeScript가 인덱싱에 사용되는 문자열이 객체의 키와 일치하는지 확신할 수 없을 때 발생하며, 유니온 타입 등을 사용해 이 문제를 해결할 수 있다. 

 

No index signature with a parameter of type 'string' was found on type '{ isExpiration: boolean; isPassword: boolean; }'.

에러는 TypeScript가 특정 문자열 타입이 객체의 키와 일치하지 않다고 판단할 때 발생합니다. 이 오류는 주로 객체에 존재하지 않는 키로 접근하려고 할 때 발생

 

해당 에러는 TypeScript가 name 매개변수가 isChecked 상태 객체의 키(isExpiration 또는 isPassword)와 일치한다고 확신할 수 없기 때문에 발생했다. TypeScript는 name이 단순히 string 타입으로 정의되어 있으면, 이는 어떤 문자열이든 될 수 있다고 추론할 수밖에 없기 때문에, isChecked 객체에 안전하게 인덱싱할 수 없다고 판단한 것

 

 

type CheckboxName = 'isExpiration' | 'isPassword';

const [isChecked, setIsChecked] = useState({
		isExpiration: false,
		isPassword: false,
	});
    
const handleCheckbox = (name: CheckboxName) => {
		setIsChecked(prev => ({
			...prev,
			[name]: !prev[name],
		}));
};
    
    
 <div className="form__input__checkbox" onClick={() => handleCheckbox('isPassword')}>
       {isChecked.isPassword && <FaCheck />}
</div>

 

 

이렇게 유니언 타입으로 변경하니 에러가 사라졌다!